<template>
  <div>
    <div class="ser_div">
      <el-row>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 产品 </el-col>
            <el-col :span="16">
              <el-select filterable v-model="ser.product_id" placeholder="请选择产品" style="width: 100%"
                @change="product_id_change">
                <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 型号</el-col>
            <el-col :span="16">
              <el-select filterable v-model="ser.model_number_id" @change="model_number_id_change" placeholder="请选择型号"
                style="width: 100%">
                <el-option v-for="(item, index) in ModelNumberList" :key="index" :label="item.model_number"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <!-- <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 规格 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.specification_id"
                placeholder="请选择规格"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in SpecificationList"
                  :key="index"
                  :label="item.specification"
                  :value="item.id"
                >
                </el-option> </el-select
            ></el-col>
          </el-row>
        </el-col> -->
        <el-col :span="4">
          <el-button @click="specification_click" icon="el-icon-search" class="add_btn">搜索</el-button>
          <el-button @click="specification_clickfalse" icon="el-icon-search" class="add_btn">重置</el-button>
          <el-button @click="add_specification" icon="el-icon-plus" class="add_btn">新增规格</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="dataList" stripe style="width: 100%" border>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="specification" label="规格"> </el-table-column>
      <!-- <el-table-column prop="manwai" label="满外"> </el-table-column>
      <el-table-column prop="jinshen" label="近身"> </el-table-column>
      <el-table-column prop="sanren" label="三人"> </el-table-column>
      <el-table-column prop="danren" label="单人"> </el-table-column>
      <el-table-column prop="guifei" label="贵妃"> </el-table-column>
      <el-table-column prop="zhuanjiao" label="转角"> </el-table-column> -->
      <el-table-column prop="jiage" label="价格"> </el-table-column>
      <el-table-column prop="jianshu" label="件数"> </el-table-column>
      <el-table-column prop="updated_at" label="时间"> </el-table-column>
      <el-table-column label="操作" width="380">
        <template slot-scope="scope">
          <el-button @click="set_product(scope.row)" type="primary" size="mini">编辑</el-button>
          <el-button @click="get_ProductspecificationJobTypeList(scope.row)" type="primary" size="mini">添加工价</el-button>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
            title="是否删除这条数据？" @confirm="del_product(scope.row)">
            <el-button slot="reference" type="primary" size="mini" style="margin-left:10px;">
              删除</el-button>
          </el-popconfirm>
          <el-button @click="tongbu_click(scope.row)" type="primary" size="mini"
            style="margin-left:10px;">同步工价</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background @prev-click="prev"
        @next-click="next" :current-page.sync="pagination.page" :page-size="pagination.per_page"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <!-- <el-dialog
      :title="addtitle"
      :visible.sync="isProduct"
      width="30%"
      :close-on-click-modal="false"
      @close="isProduct_close"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="产品" prop="product_id" v-if="isadd==1">
          <el-select
            filterable
            v-model="ruleForm.product_id"
            placeholder="请选择产品"
            style="width: 100%"
            @change="product_id_change_2"
          >
            <el-option
              v-for="(item, index) in productList"
              :key="index"
              :label="item.product_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="型号" prop="product_id" v-if="isadd==1">
          <el-select
            filterable
            v-model="ruleForm.model_number_id"
            placeholder="请选择型号"
            @change="model_number_change_add"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in ModelNumberLists"
              :key="index"
              :label="item.model_number"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格名称" prop="specification">
          <el-select
            filterable
            multiple 
            allow-create
            v-if="isadd==1"
            v-model="ruleForm.specification"
            placeholder="请选择规格"
            style="width:100%"
          > 
            <el-option
              v-for="(item, index) in specificationLists"
              :key="index"
              :label="item.specification"
              :value="item.id"
            >
            </el-option>
          
          </el-select>
          <el-input  v-if="isadd==2" v-model="ruleForm.specification" style="width:100%">

          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isProduct = false">取 消</el-button>
        <el-button type="primary" @click="submitadd('ruleForm')" v-if="isadd==1">确定</el-button>
        <el-button type="primary" @click="update_Specification" v-if="isadd==2">确定</el-button>   
      </span>
    </el-dialog> -->

    <el-dialog :title="addtitle" :visible.sync="isProduct" width="30%" :close-on-click-modal="false"
      @close="isProduct_close">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="产品" prop="product_id">
          <el-select filterable v-model="ruleForm.product_id" placeholder="请选择产品" style="width: 100%"
            @change="product_id_change_2">
            <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="型号" prop="product_id">
          <el-select filterable v-model="ruleForm.model_number_id" placeholder="请选择型号" @change="model_number_change_add"
            style="width: 100%">
            <el-option v-for="(item, index) in ModelNumberList" :key="index" :label="item.model_number" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格" prop="specification">
          <el-input v-model="ruleForm.specification" style="width:100%"></el-input>
          <!-- <el-select
            filterable
            multiple 
            allow-create
            v-if="isadd==1"
            v-model="ruleForm.specification"
            placeholder="请选择规格"
            style="width:100%"
          > 
            <el-option
              v-for="(item, index) in specificationLists"
              :key="index"
              :label="item.specification"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <!-- <el-form-item label="满外" prop="manwai">
          <el-input v-model="ruleForm.manwai" label="请输入满外"></el-input>
        </el-form-item> -->
        <el-form-item label="件数" prop="jianshu">
          <el-input-number v-model="ruleForm.jianshu" :min="1" label="请输入件数"></el-input-number>    
        </el-form-item>
        <!-- <el-form-item label="近身" prop="jinshen">
          <el-input v-model="ruleForm.jinshen" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="三人" prop="sanren">
          <el-input v-model="ruleForm.sanren" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="单人" prop="danren">
          <el-input v-model="ruleForm.danren" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="贵妃" prop="guifei">
          <el-input v-model="ruleForm.guifei" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="转角" prop="zhuanjiao">
          <el-input v-model="ruleForm.zhuanjiao" style="width:100%"></el-input>
        </el-form-item> -->
        <el-form-item label="价格" prop="jiage">
          <el-input v-model="ruleForm.jiage" style="width:100%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isProduct = false">取 消</el-button>
        <el-button type="primary" @click="submitadd('ruleForm')">确定</el-button>
        <!-- <el-button type="primary" @click="update_Specification" v-if="isadd==2">确定</el-button>    -->
      </span>
    </el-dialog>

    <el-dialog title="设置工价" :visible.sync="isjobtype" width="30%" :close-on-click-modal="false">
      <div v-if='ProductJobTypeList_sp'>
        <div class="lis" v-for="item in ProductJobTypeList_sp" :key="item.id">
          <el-row style="display: flex;align-items:center; margin-top:5px;  justify-content: center;">
            <el-col :span="10" style="text-align:center;">
              <span>{{ item.job_type }}</span>
            </el-col>
            <el-col :span="10">
              <el-input-number v-model="item.price" :precision="2"></el-input-number>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-dialog width="30%" title="提示！" :visible.sync="nei_isjobtype" append-to-body>
        是否将新修改的工价同步到历史工单!
        <span slot="footer" class="dialog-footer">
          <el-button @click="nei_isjobtype = false">关闭</el-button>
          <el-button @click="set_JobTypePriceBySpecificationId(2)">否</el-button>
          <el-button type="primary" @click="set_JobTypePriceBySpecificationId(1)">是</el-button>
        </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isjobtype = false">取 消</el-button>
        <el-button type="primary" @click="nei_isjobtype = true">确定</el-button>
      </span>
    </el-dialog>

    <!-- 同步工价 -->
    <el-dialog title="同步工价" :visible.sync="istongbu" width="30%" :close-on-click-modal="false" @close="isProduct_close_2">
      <el-form :model="ruleFormt" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="产品" prop="product_id">
          <el-select filterable multiple v-model="ruleFormt.product_ids" placeholder="请选择产品" style="width: 100%"
            @change="product_id_change_tb">
            <el-option v-for="(item, index) in productList_tb" :key="index" :label="item.product_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="型号" prop="product_id">
          <el-select filterable multiple :disabled="ruleFormt.product_ids.length > 1" v-model="ruleFormt.model_number_ids"
            placeholder="请选择型号" @change="model_number_change_tb" style="width: 100%">
            <el-option v-for="(item, index) in ModelNumberList_tb" :key="index" :label="item.model_number"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格名称" prop="specification_ids">
          <el-radio-group v-model="isradio" @input="radio_input"
            :disabled="ruleFormt.product_ids.length > 1 || ruleFormt.model_number_ids.length > 1" size="mini">
            <el-radio-button label="0">全选</el-radio-button>
            <el-radio-button label="1">多选</el-radio-button>
          </el-radio-group>
          <el-select filterable multiple v-if="isradio === '1'"
            :disabled="ruleFormt.product_ids.length > 1 || ruleFormt.model_number_ids.length > 1"
            v-model="ruleFormt.specification_ids" placeholder="请选择规格" style="width:100%">
            <el-option v-for="(item, index) in specificationList_tb" :key="index" :label="item.specification"
              :value="item.id">
            </el-option>

          </el-select>

        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="istongbu = false">取 消</el-button>
        <el-button type="primary" @click="set_istongbu">确定</el-button>
      </span>
    </el-dialog>



  </div>
</template>
<script>
import {
  getSpecificationList,
  createSpecification,
  deleteSpecification,
  getProductList,
  getModelNumberList,
  getProductJobTypeList,
  getJobTypePriceBySpecificationId,
  setJobTypePriceBySpecificationId,
  batchSetJobTypePrice,
  updateSpecification,
  getSameJobTypeListProductList
} from "@/api/product/index";
export default {
  data() {
    return {
      addtitle: '',
      isadd: 1,
      nei_isjobtype: false,
      isradio: '1',
      istongbu: false,
      isjobtype: false,
      productList: [],
      productList_tb: [],
      ModelNumberList: [],
      ModelNumberLists: [],
      ModelNumberList_tb: [],
      SpecificationList: [],
      specificationLists: [],
      specificationList_tb: [],
      ProductJobTypeList_sp: [],
      ser: {
        product_id: "",
        model_number_id: "",
        specification_id: "",
      },
      title: "",
      isProduct: false,
      dataList: [],
      pagination: {
        per_page: 10,
        page: 1,
      },
      ids: {
        product_id: '',
        model_number_id: '',
        specification_id: ''
      },
      // ruleForm: {
      //   id: "",
      //   product_id:'',
      //   model_number_id:'',
      //   specification:'',
      //   specification_ids:[],
      // },
      ruleForm: {
        id: "",
        product_id: '',
        model_number_id: '',
        specification: '',
        jinshen: "",
        sanren: '',
        danren: '',
        guifei: '',
        zhuanjiao: '',
        jiage: '',
        jianshu: 1
      },
      // rules: {
      //   model_number_id:[
      //   {
      //       required: true,
      //       message: "请选择型号",
      //       trigger: "blur",
      //     },
      //   ],
      //   product_id:[
      //   {
      //       required: true,
      //       message: "请选择产品",
      //       trigger: "blur",
      //     },
      //   ],
      //   specification: [
      //     {
      //       required: true,
      //       message: "请输入规格名称",
      //       trigger: "blur",
      //     },
      //   ],
      // },
      rules: {
        model_number_id: [
          {
            required: true,
            message: "请选择型号",
            trigger: "blur",
          },
        ],
        product_id: [
          {
            required: true,
            message: "请选择产品",
            trigger: "blur",
          },
        ],
        specification: [
          {
            required: true,
            message: "请输入规格名称",
            trigger: "blur",
          },
        ],
      },
      total: 0,
      ruleFormt: {
        old_product_id: '',
        old_model_number_id: '',
        old_specification_id: '',
        product_ids: [],
        model_number_ids: [],
        specification_ids: [],
      },
    };
  },
  mounted() {
    this.getProduct();
  },
  methods: {
    tongbu_click(row) {
      this.ruleFormt.old_product_id = this.ser.product_id
      this.ruleFormt.old_model_number_id = this.ser.model_number_id
      this.ruleFormt.old_specification_id = row.id
      this.istongbu = true;
      getSameJobTypeListProductList({ product_id: this.ser.product_id }).then(res => {
        if (res.code == 200) {
          this.productList_tb = res.data
        }
      })
    },
    radio_input(val) {
      if (val == 0) {
        this.ruleFormt.specification_ids = []
        this.specificationList_tb.forEach(item => {
          this.ruleFormt.specification_ids.push(item.id)
        })
      } else {
        this.ruleFormt.specification_ids = []
      }
    },
    model_number_change_add(val) {
      let obj = {
        product_id: this.ruleForm.product_id,
        model_number_id: val
      }
      getSpecificationList({ ...obj, per_page: 1000 }).then((res) => {
        if (res.code == 200) {
          this.specificationList = res.data.data
        }
      });
    },
    model_number_change_tb(val) {
      let obj = {
        product_id: this.ruleFormt.product_ids[0],
        model_number_id: val
      }
      getSpecificationList({ ...obj, per_page: 1000 }).then((res) => {
        if (res.code == 200) {
          this.specificationList_tb = res.data.data
        }
      });
    },
    set_istongbu() {
      batchSetJobTypePrice(this.ruleFormt).then(res => {
        if (res.code == 200) {
          this.istongbu = false;
          this.$message.success("提交成功");
        }
      })
    },
    set_JobTypePriceBySpecificationId(val) {
      console.log(val)
      let obj = {
        ...this.ids,
        job_type_price_arr: this.ProductJobTypeList_sp,
        is_update: val
      }

      setJobTypePriceBySpecificationId(obj).then(res => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.isjobtype = false
          this.nei_isjobtype = false
          // this.getProduct();
          this.ProductJobTypeList_sp = []
        }
      })
    },
    isProduct_close_2() {
      this.ruleFormt = {
        id: "",
        product_id: '',
        model_number_id: '',
        specification_id: '',
        product_ids: [],
        model_number_ids: [],
        specification_ids: [],
      }
    },
    isProduct_close() {
      this.ruleForm = {
        id: "",
        product_id: '',
        model_number_id: '',
        specification: '',
        jinshen: "",
        sanren: '',
        danren: '',
        guifei: '',
        zhuanjiao: '',
        jiage: '',
        jianshu: 1
      }
    },
    // 查询产品规格工种列表
    get_ProductspecificationJobTypeList(row) {
      this.ids.specification_id = row.id
      this.ids.product_id = this.ser.product_id
      this.ids.model_number_id = this.ser.model_number_id
      let obj = {
        product_id: this.ser.product_id,
        model_number_id: this.ser.model_number_id,
        specification_id: row.id
      };
      this.ProductJobTypeList_sp=[]
      getJobTypePriceBySpecificationId(obj).then(res => {
        if (res.code == 200) {
          if (res.data.length == 0) {
            this.getjobtype(this.ser.product_id)
          } else {
            console.log(res.data)
            let arry = []
            res.data.forEach((item) => {
              let obj = {
                job_type: item.job_type.job_type,
                job_type_id: item.job_type.id,
                price: item.price,
              };
              arry.push(obj);
            });
            // this.ProductJobTypeList_sp=arry
            this.ProductJobTypeList_sp = JSON.parse(JSON.stringify(arry))
            // this.$set(this.ProductJobTypeList_sp,arry)
            console.log(this.ProductJobTypeList_sp)
            this.isjobtype = true
          }
        }
      })
    },
    getjobtype(id) {
      console.log(id)
      this.ProductJobTypeList_sp=[]
      getProductJobTypeList({ product_id: id }).then((res) => {
        if (res.code == 200) {
          res.data.forEach((item) => {
            let obj = {
              job_type: item.job_type,
              job_type_id: item.id,
              price: '',
            };
            this.ProductJobTypeList_sp.push(obj);
          });
          this.isjobtype = true
        }
      });
    },
    model_number_id_change(val) {
      this.getlist();
      // let obj = {
      //   product_id: this.ser.product_id,
      //   model_number_id: val,
      // };
      // getSpecificationList(obj).then((res) => {
      //   if (res.code == 200) {
      //     this.SpecificationList = res.data.data;

      //   }
      // });
    },
    //获取产品
    getProduct() {
      getProductList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.ser.product_id = res.data.data[0].id
          this.get_producModel(this.ser.product_id)
        }
      });
    },
    get_producModel(id) {
      getModelNumberList({ product_id: id, field_list: 'id,model_number', is_dropdown: 1 }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList = res.data.data;
          this.ser.model_number_id = ''
          if (res.data.data.length > 0) {
            this.ser.model_number_id = res.data.data[0].id
          }
          this.getlist();
          // else{
          //   this.$message.error("当前产品无型号,请先添加型号");
          // }

        }
      });
    },
    // 搜索
    product_id_change(val) {
      this.ModelNumberList = [];
      this.SpecificationList = [];
      this.ser.model_number_id = "";
      this.ser.specification_id = "";
      this.get_producModel(val);
    },
    // 编辑
    product_id_change_2(val) {
      this.ModelNumberList = [];
      this.SpecificationList = [];
      this.get_producModel_2(val);

    },
    product_id_change_tb(val) {
      this.ModelNumberList_tb = [];
      this.SpecificationList = [];
      this.get_producModel_3(val);
    },
    get_producModel_3(id) {
      getModelNumberList({ product_id: id, field_list: 'id,model_number', is_dropdown: 1 }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList_tb = res.data.data;
          this.ruleForm.model_number_id = ''
          if (res.data.data.length > 0) {
            this.ruleForm.model_number_id = res.data.data[0].id
          } else {
            this.$message.error("当前产品无型号,请先添加型号");
          }
        }
      });
    },
    get_producModel_2(id) {
      getModelNumberList({ product_id: id, field_list: 'id,model_number', is_dropdown: 1 }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberLists = res.data.data;
          this.ModelNumberList = res.data.data;

          this.ruleForm.model_number_id = ''
          if (res.data.data.length > 0) {
            this.ruleForm.model_number_id = res.data.data[0].id
          } else {
            this.$message.error("当前产品无型号,请先添加型号");
          }
        }
      });
    },
    set_product(row) {
      // this.ruleForm = row;
      this.ruleForm = row
      this.ruleForm.id = row.id
      this.ruleForm.product_id = this.ser.product_id
      this.ruleForm.model_number_id = this.ser.model_number_id

      this.addtitle = "编辑规格";
      this.isadd = 2
      this.isProduct = true;
    },
    add_specification() {
      this.isadd = 1
      this.addtitle = "新增规格";
      this.isProduct = true;
      // this.$nextTick(function () {
      //   this.$refs.ruleForm.resetFields();
      // }); 
      this.ruleForm = {
        id: "",
        product_id: '',
        model_number_id: '',
        specification: '',
        specification_ids: []
      }
      this.ruleForm.product_id = this.ser.product_id
      this.ruleForm.model_number_id = this.ser.model_number_id
    },
    // update_Specification(){
    //   let obj={
    //     id:this.ruleForm.id,
    //     specification:this.ruleForm.specification
    //   }
    //   updateSpecification(obj).then(res=>{
    //     if(res.code ==200){
    //       this.isProduct = false;
    //       this.$message.success("提交成功");
    //       this.getlist();
    //       this.ruleForm.specification=''
    //       this.ruleForm.id=''
    //       this.ruleForm.specification_ids=[]
    //     }
    //   })
    // },
    submitadd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.specification_ids = this.ruleForm.specification
          createSpecification(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.isProduct = false;
              this.$message.success("提交成功");
              this.getlist();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getlist() {
      getSpecificationList({ ...this.pagination, ...this.ser }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    specification_clickfalse() {
      this.getProduct();
    },
    specification_click() {
      this.pagination = {
        per_page: 10,
        page: 1,
      };
      getSpecificationList({
        ...this.ser,
        ...this.pagination,
      }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },
    del_product(row) {
      deleteSpecification({ id: row.id, is_del: 1 }).then((res) => {
        if (res.code == 200) {
          this.isProduct = false;
          this.$message.success("提交成功");
          this.getlist();
        }
      });
    },
  },
};
</script>

<style></style>
